<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教室后台-不学也通</title>
    <style> 
        .container{
            min-height: 100vh;
        }
        .container.nav{
            min-height: 100vh;
            background-color: #fff;
        }
    </style>
</head>
<body> 
    <!--container是bootstrap的居中窄的显示方案-->
    <div class="container bg-body-secondary">
        <div class="row">
            <div class="col-md-2 leftmenu">
                <div class="row mt-5">
                    <img style="width: 6rem;height: 6rem;"class="img-thumbnail mx-auto d-block rounded-circle" src="" alt="头像">
                </div>
                <div class="row">
                    <h3 class="text-center"></h3>
                </div>
                <div class="row mt-3"> 
                    <a href="#" class="btn btn-outline-primary rounded-pill">账号管理</a>
                    <a href="#" class="btn btn-outline-warning rounded-pill">输入邀请码</a>
                </div>
            </div>
            <div class="col-md-9 kc ms-3">
                <div class="row">学习选择栏</div>
                <div class="row">
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                    <div class="card" style="width:  18rem;">
                        <img src="./img/u=2379173324,3055191993&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto.webp" class="card-img-top" alt="web前端">
                        <div class="card-body">
                            <h5 class="card-title">web前端开发基础</h5>
                            <h6 class="mt-1 text-muted">平顶山职业技术学院</h6>
                            <h6 class="mt-1 text-muted">课程号:mb-001</h6>
                            <h6 class="mt-1 text-muted">教师</h6>
                            <h6 class="mt-1 text-muted d-flex justify-content-between">
                                <div>22级移动应用开发</div>
                                <div>17<i class="bi bi-chevron-right"></i></div>
                            </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="../js/main.js"></script>
</body>
</html>